import ChartAreaAxes from "@/examples/ui/chart/chart-area-axes"
import ChartAreaDefault from "@/examples/ui/chart/chart-area-default"
import ChartAreaIcons from "@/examples/ui/chart/chart-area-icons"
import ChartAreaInteractive from "@/examples/ui/chart/chart-area-interactive"
import ChartAreaLegend from "@/examples/ui/chart/chart-area-legend"
import ChartAreaLinear from "@/examples/ui/chart/chart-area-linear"
import ChartAreaStacked from "@/examples/ui/chart/chart-area-stacked"
import ChartAreaStackedExpand from "@/examples/ui/chart/chart-area-stacked-expand"
import ChartAreaStep from "@/examples/ui/chart/chart-area-step"
import ChartBarActive from "@/examples/ui/chart/chart-bar-active"
import ChartBarDefault from "@/examples/ui/chart/chart-bar-default"
import ChartBarHorizontal from "@/examples/ui/chart/chart-bar-horizontal"
import ChartBarInteractive from "@/examples/ui/chart/chart-bar-interactive"
import ChartBarLabel from "@/examples/ui/chart/chart-bar-label"
import ChartBarLabelCustom from "@/examples/ui/chart/chart-bar-label-custom"
import ChartBarMixed from "@/examples/ui/chart/chart-bar-mixed"
import ChartBarMultiple from "@/examples/ui/chart/chart-bar-multiple"
import ChartBarNegative from "@/examples/ui/chart/chart-bar-negative"
import ChartBarStacked from "@/examples/ui/chart/chart-bar-stacked"
import ChartLineDefault from "@/examples/ui/chart/chart-line-default"
import ChartLineDots from "@/examples/ui/chart/chart-line-dots"
import ChartLineDotsColors from "@/examples/ui/chart/chart-line-dots-colors"
import ChartLineDotsCustom from "@/examples/ui/chart/chart-line-dots-custom"
import ChartLineInteractive from "@/examples/ui/chart/chart-line-interactive"
import ChartLineLabel from "@/examples/ui/chart/chart-line-label"
import ChartLineLabelCustom from "@/examples/ui/chart/chart-line-label-custom"
import ChartLineLinear from "@/examples/ui/chart/chart-line-linear"
import ChartLineMultiple from "@/examples/ui/chart/chart-line-multiple"
import ChartLineStep from "@/examples/ui/chart/chart-line-step"
import ChartPieDonut from "@/examples/ui/chart/chart-pie-donut"
import ChartPieDonutActive from "@/examples/ui/chart/chart-pie-donut-active"
import ChartPieDonutText from "@/examples/ui/chart/chart-pie-donut-text"
import ChartPieLabel from "@/examples/ui/chart/chart-pie-label"
import ChartPieLabelCustom from "@/examples/ui/chart/chart-pie-label-custom"
import ChartPieLabelList from "@/examples/ui/chart/chart-pie-label-list"
import ChartPieLegend from "@/examples/ui/chart/chart-pie-legend"
import ChartPieSimple from "@/examples/ui/chart/chart-pie-simple"
import ChartPieStacked from "@/examples/ui/chart/chart-pie-stacked"
import ChartTooltipAdvanced from "@/examples/ui/chart/chart-tooltip-advanced"
import ChartTooltipDefault from "@/examples/ui/chart/chart-tooltip-default"
import ChartTooltipFormatter from "@/examples/ui/chart/chart-tooltip-formatter"
import ChartTooltipIcons from "@/examples/ui/chart/chart-tooltip-icons"
import ChartTooltipIndicatorLine from "@/examples/ui/chart/chart-tooltip-indicator-line"
import ChartTooltipIndicatorNone from "@/examples/ui/chart/chart-tooltip-indicator-none"
import ChartTooltipLabelCustom from "@/examples/ui/chart/chart-tooltip-label-custom"
import ChartTooltipLabelFormatter from "@/examples/ui/chart/chart-tooltip-label-formatter"
import ChartTooltipLabelNone from "@/examples/ui/chart/chart-tooltip-label-none"

export interface ChartExample {
  component: React.ComponentType
  code: string
  name: string
}

export const charts: ChartExample[] = [
  {
    component: ChartAreaAxes,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "An area chart with axes"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartAreaAxes() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Area Chart - Axes</CardTitle>\r\n        <CardDescription>\r\n          Showing total visitors for the last 6 months\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <AreaChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: -20,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <YAxis\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickCount={3}\r\n            />\r\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\r\n            <Area\r\n              dataKey="mobile"\r\n              type="natural"\r\n              fill="var(--color-mobile)"\r\n              stroke="var(--color-mobile)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n            <Area\r\n              dataKey="desktop"\r\n              type="natural"\r\n              fill="var(--color-desktop)"\r\n              stroke="var(--color-desktop)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter>\r\n        <div className="flex w-full items-start gap-2 text-sm">\r\n          <div className="grid gap-2">\r\n            <div className="flex items-center gap-2 leading-none font-medium">\r\n              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n            </div>\r\n            <div className="text-muted-foreground flex items-center gap-2 leading-none">\r\n              January - June 2024\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartAreaAxes",
  },
  {
    component: ChartAreaDefault,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A simple area chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186 },\r\n  { month: "February", desktop: 305 },\r\n  { month: "March", desktop: 237 },\r\n  { month: "April", desktop: 73 },\r\n  { month: "May", desktop: 209 },\r\n  { month: "June", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartAreaDefault() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Area Chart</CardTitle>\r\n        <CardDescription>\r\n          Showing total visitors for the last 6 months\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <AreaChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent indicator="dot" />}\r\n            />\r\n            <Area\r\n              dataKey="desktop"\r\n              type="natural"\r\n              fill="var(--color-desktop)"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter>\r\n        <div className="flex w-full items-start gap-2 text-sm">\r\n          <div className="grid gap-2">\r\n            <div className="flex items-center gap-2 leading-none font-medium">\r\n              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n            </div>\r\n            <div className="text-muted-foreground flex items-center gap-2 leading-none">\r\n              January - June 2024\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartAreaDefault",
  },
  {
    component: ChartAreaIcons,
    code: '"use client"\r\n\r\nimport { TrendingDown, TrendingUp } from "lucide-react"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "An area chart with icons"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n    icon: TrendingDown,\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n    icon: TrendingUp,\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartAreaIcons() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Area Chart - Icons</CardTitle>\r\n        <CardDescription>\r\n          Showing total visitors for the last 6 months\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <AreaChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent indicator="line" />}\r\n            />\r\n            <Area\r\n              dataKey="mobile"\r\n              type="natural"\r\n              fill="var(--color-mobile)"\r\n              stroke="var(--color-mobile)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n            <Area\r\n              dataKey="desktop"\r\n              type="natural"\r\n              fill="var(--color-desktop)"\r\n              stroke="var(--color-desktop)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n            <ChartLegend content={<ChartLegendContent />} />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter>\r\n        <div className="flex w-full items-start gap-2 text-sm">\r\n          <div className="grid gap-2">\r\n            <div className="flex items-center gap-2 leading-none font-medium">\r\n              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n            </div>\r\n            <div className="text-muted-foreground flex items-center gap-2 leading-none">\r\n              January - June 2024\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartAreaIcons",
  },
  {
    component: ChartAreaInteractive,
    code: '"use client"\r\n\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport * as React from "react"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from "@/components/ui/select"\r\n\r\nexport const description = "An interactive area chart"\r\n\r\nconst chartData = [\r\n  { date: "2024-04-01", desktop: 222, mobile: 150 },\r\n  { date: "2024-04-02", desktop: 97, mobile: 180 },\r\n  { date: "2024-04-03", desktop: 167, mobile: 120 },\r\n  { date: "2024-04-04", desktop: 242, mobile: 260 },\r\n  { date: "2024-04-05", desktop: 373, mobile: 290 },\r\n  { date: "2024-04-06", desktop: 301, mobile: 340 },\r\n  { date: "2024-04-07", desktop: 245, mobile: 180 },\r\n  { date: "2024-04-08", desktop: 409, mobile: 320 },\r\n  { date: "2024-04-09", desktop: 59, mobile: 110 },\r\n  { date: "2024-04-10", desktop: 261, mobile: 190 },\r\n  { date: "2024-04-11", desktop: 327, mobile: 350 },\r\n  { date: "2024-04-12", desktop: 292, mobile: 210 },\r\n  { date: "2024-04-13", desktop: 342, mobile: 380 },\r\n  { date: "2024-04-14", desktop: 137, mobile: 220 },\r\n  { date: "2024-04-15", desktop: 120, mobile: 170 },\r\n  { date: "2024-04-16", desktop: 138, mobile: 190 },\r\n  { date: "2024-04-17", desktop: 446, mobile: 360 },\r\n  { date: "2024-04-18", desktop: 364, mobile: 410 },\r\n  { date: "2024-04-19", desktop: 243, mobile: 180 },\r\n  { date: "2024-04-20", desktop: 89, mobile: 150 },\r\n  { date: "2024-04-21", desktop: 137, mobile: 200 },\r\n  { date: "2024-04-22", desktop: 224, mobile: 170 },\r\n  { date: "2024-04-23", desktop: 138, mobile: 230 },\r\n  { date: "2024-04-24", desktop: 387, mobile: 290 },\r\n  { date: "2024-04-25", desktop: 215, mobile: 250 },\r\n  { date: "2024-04-26", desktop: 75, mobile: 130 },\r\n  { date: "2024-04-27", desktop: 383, mobile: 420 },\r\n  { date: "2024-04-28", desktop: 122, mobile: 180 },\r\n  { date: "2024-04-29", desktop: 315, mobile: 240 },\r\n  { date: "2024-04-30", desktop: 454, mobile: 380 },\r\n  { date: "2024-05-01", desktop: 165, mobile: 220 },\r\n  { date: "2024-05-02", desktop: 293, mobile: 310 },\r\n  { date: "2024-05-03", desktop: 247, mobile: 190 },\r\n  { date: "2024-05-04", desktop: 385, mobile: 420 },\r\n  { date: "2024-05-05", desktop: 481, mobile: 390 },\r\n  { date: "2024-05-06", desktop: 498, mobile: 520 },\r\n  { date: "2024-05-07", desktop: 388, mobile: 300 },\r\n  { date: "2024-05-08", desktop: 149, mobile: 210 },\r\n  { date: "2024-05-09", desktop: 227, mobile: 180 },\r\n  { date: "2024-05-10", desktop: 293, mobile: 330 },\r\n  { date: "2024-05-11", desktop: 335, mobile: 270 },\r\n  { date: "2024-05-12", desktop: 197, mobile: 240 },\r\n  { date: "2024-05-13", desktop: 197, mobile: 160 },\r\n  { date: "2024-05-14", desktop: 448, mobile: 490 },\r\n  { date: "2024-05-15", desktop: 473, mobile: 380 },\r\n  { date: "2024-05-16", desktop: 338, mobile: 400 },\r\n  { date: "2024-05-17", desktop: 499, mobile: 420 },\r\n  { date: "2024-05-18", desktop: 315, mobile: 350 },\r\n  { date: "2024-05-19", desktop: 235, mobile: 180 },\r\n  { date: "2024-05-20", desktop: 177, mobile: 230 },\r\n  { date: "2024-05-21", desktop: 82, mobile: 140 },\r\n  { date: "2024-05-22", desktop: 81, mobile: 120 },\r\n  { date: "2024-05-23", desktop: 252, mobile: 290 },\r\n  { date: "2024-05-24", desktop: 294, mobile: 220 },\r\n  { date: "2024-05-25", desktop: 201, mobile: 250 },\r\n  { date: "2024-05-26", desktop: 213, mobile: 170 },\r\n  { date: "2024-05-27", desktop: 420, mobile: 460 },\r\n  { date: "2024-05-28", desktop: 233, mobile: 190 },\r\n  { date: "2024-05-29", desktop: 78, mobile: 130 },\r\n  { date: "2024-05-30", desktop: 340, mobile: 280 },\r\n  { date: "2024-05-31", desktop: 178, mobile: 230 },\r\n  { date: "2024-06-01", desktop: 178, mobile: 200 },\r\n  { date: "2024-06-02", desktop: 470, mobile: 410 },\r\n  { date: "2024-06-03", desktop: 103, mobile: 160 },\r\n  { date: "2024-06-04", desktop: 439, mobile: 380 },\r\n  { date: "2024-06-05", desktop: 88, mobile: 140 },\r\n  { date: "2024-06-06", desktop: 294, mobile: 250 },\r\n  { date: "2024-06-07", desktop: 323, mobile: 370 },\r\n  { date: "2024-06-08", desktop: 385, mobile: 320 },\r\n  { date: "2024-06-09", desktop: 438, mobile: 480 },\r\n  { date: "2024-06-10", desktop: 155, mobile: 200 },\r\n  { date: "2024-06-11", desktop: 92, mobile: 150 },\r\n  { date: "2024-06-12", desktop: 492, mobile: 420 },\r\n  { date: "2024-06-13", desktop: 81, mobile: 130 },\r\n  { date: "2024-06-14", desktop: 426, mobile: 380 },\r\n  { date: "2024-06-15", desktop: 307, mobile: 350 },\r\n  { date: "2024-06-16", desktop: 371, mobile: 310 },\r\n  { date: "2024-06-17", desktop: 475, mobile: 520 },\r\n  { date: "2024-06-18", desktop: 107, mobile: 170 },\r\n  { date: "2024-06-19", desktop: 341, mobile: 290 },\r\n  { date: "2024-06-20", desktop: 408, mobile: 450 },\r\n  { date: "2024-06-21", desktop: 169, mobile: 210 },\r\n  { date: "2024-06-22", desktop: 317, mobile: 270 },\r\n  { date: "2024-06-23", desktop: 480, mobile: 530 },\r\n  { date: "2024-06-24", desktop: 132, mobile: 180 },\r\n  { date: "2024-06-25", desktop: 141, mobile: 190 },\r\n  { date: "2024-06-26", desktop: 434, mobile: 380 },\r\n  { date: "2024-06-27", desktop: 448, mobile: 490 },\r\n  { date: "2024-06-28", desktop: 149, mobile: 200 },\r\n  { date: "2024-06-29", desktop: 103, mobile: 160 },\r\n  { date: "2024-06-30", desktop: 446, mobile: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartAreaInteractive() {\r\n  const [timeRange, setTimeRange] = React.useState("90d")\r\n\r\n  const filteredData = chartData.filter((item) => {\r\n    const date = new Date(item.date)\r\n    const referenceDate = new Date("2024-06-30")\r\n    let daysToSubtract = 90\r\n    if (timeRange === "30d") {\r\n      daysToSubtract = 30\r\n    } else if (timeRange === "7d") {\r\n      daysToSubtract = 7\r\n    }\r\n    const startDate = new Date(referenceDate)\r\n    startDate.setDate(startDate.getDate() - daysToSubtract)\r\n    return date >= startDate\r\n  })\r\n\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader className="flex items-center sm:gap-2 gap-4 space-y-0 sm:flex-row flex-col">\r\n        <div className="grid flex-1 gap-1 text-center sm:text-left">\r\n          <CardTitle>Area Chart - Interactive</CardTitle>\r\n          <CardDescription>\r\n            Showing total visitors for the last 3 months\r\n          </CardDescription>\r\n        </div>\r\n        <Select value={timeRange} onValueChange={setTimeRange}>\r\n          <SelectTrigger\r\n            className="w-[160px] sm:ml-auto"\r\n            aria-label="Select a value"\r\n          >\r\n            <SelectValue placeholder="Last 3 months" />\r\n          </SelectTrigger>\r\n          <SelectContent>\r\n            <SelectItem value="90d">Last 3 months</SelectItem>\r\n            <SelectItem value="30d">Last 30 days</SelectItem>\r\n            <SelectItem value="7d">Last 7 days</SelectItem>\r\n          </SelectContent>\r\n        </Select>\r\n      </CardHeader>\r\n      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="aspect-auto h-[250px] w-full"\r\n        >\r\n          <AreaChart data={filteredData}>\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              minTickGap={32}\r\n              tickFormatter={(value) => {\r\n                const date = new Date(value)\r\n                return date.toLocaleDateString("en-US", {\r\n                  month: "short",\r\n                  day: "numeric",\r\n                })\r\n              }}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={\r\n                <ChartTooltipContent\r\n                  labelFormatter={(value) => {\r\n                    return new Date(value).toLocaleDateString("en-US", {\r\n                      month: "short",\r\n                      day: "numeric",\r\n                    })\r\n                  }}\r\n                  indicator="dot"\r\n                />\r\n              }\r\n            />\r\n            <Area\r\n              dataKey="mobile"\r\n              type="natural"\r\n              fill="var(--color-mobile)"\r\n              stroke="var(--color-mobile)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n            <Area\r\n              dataKey="desktop"\r\n              type="natural"\r\n              fill="var(--color-desktop)"\r\n              stroke="var(--color-desktop)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n            <ChartLegend content={<ChartLegendContent />} />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartAreaInteractive",
  },
  {
    component: ChartAreaLegend,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "An area chart with a legend"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartAreaLegend() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Area Chart - Legend</CardTitle>\r\n        <CardDescription>\r\n          Showing total visitors for the last 6 months\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <AreaChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent indicator="line" />}\r\n            />\r\n            <Area\r\n              dataKey="mobile"\r\n              type="natural"\r\n              fill="var(--color-mobile)"\r\n              stroke="var(--color-mobile)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n            <Area\r\n              dataKey="desktop"\r\n              type="natural"\r\n              fill="var(--color-desktop)"\r\n              stroke="var(--color-desktop)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n            <ChartLegend content={<ChartLegendContent />} />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter>\r\n        <div className="flex w-full items-start gap-2 text-sm">\r\n          <div className="grid gap-2">\r\n            <div className="flex items-center gap-2 leading-none font-medium">\r\n              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n            </div>\r\n            <div className="text-muted-foreground flex items-center gap-2 leading-none">\r\n              January - June 2024\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartAreaLegend",
  },
  {
    component: ChartAreaLinear,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A linear area chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186 },\r\n  { month: "February", desktop: 305 },\r\n  { month: "March", desktop: 237 },\r\n  { month: "April", desktop: 73 },\r\n  { month: "May", desktop: 209 },\r\n  { month: "June", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartAreaLinear() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Area Chart - Linear</CardTitle>\r\n        <CardDescription>\r\n          Showing total visitors for the last 6 months\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <AreaChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent indicator="dot" hideLabel />}\r\n            />\r\n            <Area\r\n              dataKey="desktop"\r\n              type="linear"\r\n              fill="var(--color-desktop)"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter>\r\n        <div className="flex w-full items-start gap-2 text-sm">\r\n          <div className="grid gap-2">\r\n            <div className="flex items-center gap-2 leading-none font-medium">\r\n              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n            </div>\r\n            <div className="text-muted-foreground flex items-center gap-2 leading-none">\r\n              January - June 2024\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartAreaLinear",
  },
  {
    component: ChartAreaStackedExpand,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked area chart with expand stacking"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80, other: 45 },\r\n  { month: "February", desktop: 305, mobile: 200, other: 100 },\r\n  { month: "March", desktop: 237, mobile: 120, other: 150 },\r\n  { month: "April", desktop: 73, mobile: 190, other: 50 },\r\n  { month: "May", desktop: 209, mobile: 130, other: 100 },\r\n  { month: "June", desktop: 214, mobile: 140, other: 160 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-3)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartAreaStackedExpand() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\r\n        <CardDescription>\r\n          Showing total visitors for the last 6months\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <AreaChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n              top: 12,\r\n            }}\r\n            stackOffset="expand"\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent indicator="line" />}\r\n            />\r\n            <Area\r\n              dataKey="other"\r\n              type="natural"\r\n              fill="var(--color-other)"\r\n              stroke="var(--color-other)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n            <Area\r\n              dataKey="mobile"\r\n              type="natural"\r\n              fill="var(--color-mobile)"\r\n              stroke="var(--color-mobile)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n            <Area\r\n              dataKey="desktop"\r\n              type="natural"\r\n              fill="var(--color-desktop)"\r\n              stroke="var(--color-desktop)"\r\n              stackId="a"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter>\r\n        <div className="flex w-full items-start gap-2 text-sm">\r\n          <div className="grid gap-2">\r\n            <div className="flex items-center gap-2 leading-none font-medium">\r\n              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n            </div>\r\n            <div className="text-muted-foreground flex items-center gap-2 leading-none">\r\n              January - June 2024\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartAreaStackedExpand",
  },
  {
    component: ChartAreaStacked,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked area chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartAreaStacked() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Area Chart - Stacked</CardTitle>\r\n        <CardDescription>\r\n          Showing total visitors for the last 6 months\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <AreaChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent indicator="dot" />}\r\n            />\r\n            <Area\r\n              dataKey="mobile"\r\n              type="natural"\r\n              fill="var(--color-mobile)"\r\n              stroke="var(--color-mobile)"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n              stackId="a"\r\n            />\r\n            <Area\r\n              dataKey="desktop"\r\n              type="natural"\r\n              fill="var(--color-desktop)"\r\n              stroke="var(--color-desktop)"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n              stackId="a"\r\n            />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter>\r\n        <div className="flex w-full items-start gap-2 text-sm">\r\n          <div className="grid gap-2">\r\n            <div className="flex items-center gap-2 leading-none font-medium">\r\n              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n            </div>\r\n            <div className="text-muted-foreground flex items-center gap-2 leading-none">\r\n              January - June 2024\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartAreaStacked",
  },
  {
    component: ChartAreaStep,
    code: '"use client"\r\n\r\nimport { Activity, TrendingUp } from "lucide-react"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A step area chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186 },\r\n  { month: "February", desktop: 305 },\r\n  { month: "March", desktop: 237 },\r\n  { month: "April", desktop: 73 },\r\n  { month: "May", desktop: 209 },\r\n  { month: "June", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n    icon: Activity,\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartAreaStep() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Area Chart - Step</CardTitle>\r\n        <CardDescription>\r\n          Showing total visitors for the last 6 months\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <AreaChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Area\r\n              dataKey="desktop"\r\n              type="step"\r\n              fill="var(--color-desktop)"\r\n              stroke="var(--color-desktop)"\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter>\r\n        <div className="flex w-full items-start gap-2 text-sm">\r\n          <div className="grid gap-2">\r\n            <div className="flex items-center gap-2 leading-none font-medium">\r\n              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n            </div>\r\n            <div className="text-muted-foreground flex items-center gap-2 leading-none">\r\n              January - June 2024\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartAreaStep",
  },
  {
    component: ChartBarActive,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A bar chart with an active bar"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarActive() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart - Active</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="browser"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) =>\r\n                chartConfig[value as keyof typeof chartConfig]?.label\r\n              }\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Bar\r\n              dataKey="visitors"\r\n              strokeWidth={2}\r\n              radius={8}\r\n              activeIndex={2}\r\n              activeBar={({ ...props }) => {\r\n                return (\r\n                  <Rectangle\r\n                    {...props}\r\n                    fillOpacity={0.8}\r\n                    stroke={props.payload.fill}\r\n                    className="!stroke-4"\r\n                  />\r\n                )\r\n              }}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarActive",
  },
  {
    component: ChartBarDefault,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Bar, BarChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A bar chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186 },\r\n  { month: "February", desktop: 305 },\r\n  { month: "March", desktop: 237 },\r\n  { month: "April", desktop: 73 },\r\n  { month: "May", desktop: 209 },\r\n  { month: "June", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarDefault() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarDefault",
  },
  {
    component: ChartBarHorizontal,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Bar, BarChart, XAxis, YAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A horizontal bar chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186 },\r\n  { month: "February", desktop: 305 },\r\n  { month: "March", desktop: 237 },\r\n  { month: "April", desktop: 73 },\r\n  { month: "May", desktop: 209 },\r\n  { month: "June", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarHorizontal() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            layout="vertical"\r\n            margin={{\r\n              left: -20,\r\n            }}\r\n          >\r\n            <XAxis type="number" dataKey="desktop" hide />\r\n            <YAxis\r\n              dataKey="month"\r\n              type="category"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarHorizontal",
  },
  {
    component: ChartBarInteractive,
    code: '"use client"\r\n\r\nimport { Bar, BarChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport * as React from "react"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "An interactive bar chart"\r\n\r\nconst chartData = [\r\n  { date: "2024-04-01", desktop: 222, mobile: 150 },\r\n  { date: "2024-04-02", desktop: 97, mobile: 180 },\r\n  { date: "2024-04-03", desktop: 167, mobile: 120 },\r\n  { date: "2024-04-04", desktop: 242, mobile: 260 },\r\n  { date: "2024-04-05", desktop: 373, mobile: 290 },\r\n  { date: "2024-04-06", desktop: 301, mobile: 340 },\r\n  { date: "2024-04-07", desktop: 245, mobile: 180 },\r\n  { date: "2024-04-08", desktop: 409, mobile: 320 },\r\n  { date: "2024-04-09", desktop: 59, mobile: 110 },\r\n  { date: "2024-04-10", desktop: 261, mobile: 190 },\r\n  { date: "2024-04-11", desktop: 327, mobile: 350 },\r\n  { date: "2024-04-12", desktop: 292, mobile: 210 },\r\n  { date: "2024-04-13", desktop: 342, mobile: 380 },\r\n  { date: "2024-04-14", desktop: 137, mobile: 220 },\r\n  { date: "2024-04-15", desktop: 120, mobile: 170 },\r\n  { date: "2024-04-16", desktop: 138, mobile: 190 },\r\n  { date: "2024-04-17", desktop: 446, mobile: 360 },\r\n  { date: "2024-04-18", desktop: 364, mobile: 410 },\r\n  { date: "2024-04-19", desktop: 243, mobile: 180 },\r\n  { date: "2024-04-20", desktop: 89, mobile: 150 },\r\n  { date: "2024-04-21", desktop: 137, mobile: 200 },\r\n  { date: "2024-04-22", desktop: 224, mobile: 170 },\r\n  { date: "2024-04-23", desktop: 138, mobile: 230 },\r\n  { date: "2024-04-24", desktop: 387, mobile: 290 },\r\n  { date: "2024-04-25", desktop: 215, mobile: 250 },\r\n  { date: "2024-04-26", desktop: 75, mobile: 130 },\r\n  { date: "2024-04-27", desktop: 383, mobile: 420 },\r\n  { date: "2024-04-28", desktop: 122, mobile: 180 },\r\n  { date: "2024-04-29", desktop: 315, mobile: 240 },\r\n  { date: "2024-04-30", desktop: 454, mobile: 380 },\r\n  { date: "2024-05-01", desktop: 165, mobile: 220 },\r\n  { date: "2024-05-02", desktop: 293, mobile: 310 },\r\n  { date: "2024-05-03", desktop: 247, mobile: 190 },\r\n  { date: "2024-05-04", desktop: 385, mobile: 420 },\r\n  { date: "2024-05-05", desktop: 481, mobile: 390 },\r\n  { date: "2024-05-06", desktop: 498, mobile: 520 },\r\n  { date: "2024-05-07", desktop: 388, mobile: 300 },\r\n  { date: "2024-05-08", desktop: 149, mobile: 210 },\r\n  { date: "2024-05-09", desktop: 227, mobile: 180 },\r\n  { date: "2024-05-10", desktop: 293, mobile: 330 },\r\n  { date: "2024-05-11", desktop: 335, mobile: 270 },\r\n  { date: "2024-05-12", desktop: 197, mobile: 240 },\r\n  { date: "2024-05-13", desktop: 197, mobile: 160 },\r\n  { date: "2024-05-14", desktop: 448, mobile: 490 },\r\n  { date: "2024-05-15", desktop: 473, mobile: 380 },\r\n  { date: "2024-05-16", desktop: 338, mobile: 400 },\r\n  { date: "2024-05-17", desktop: 499, mobile: 420 },\r\n  { date: "2024-05-18", desktop: 315, mobile: 350 },\r\n  { date: "2024-05-19", desktop: 235, mobile: 180 },\r\n  { date: "2024-05-20", desktop: 177, mobile: 230 },\r\n  { date: "2024-05-21", desktop: 82, mobile: 140 },\r\n  { date: "2024-05-22", desktop: 81, mobile: 120 },\r\n  { date: "2024-05-23", desktop: 252, mobile: 290 },\r\n  { date: "2024-05-24", desktop: 294, mobile: 220 },\r\n  { date: "2024-05-25", desktop: 201, mobile: 250 },\r\n  { date: "2024-05-26", desktop: 213, mobile: 170 },\r\n  { date: "2024-05-27", desktop: 420, mobile: 460 },\r\n  { date: "2024-05-28", desktop: 233, mobile: 190 },\r\n  { date: "2024-05-29", desktop: 78, mobile: 130 },\r\n  { date: "2024-05-30", desktop: 340, mobile: 280 },\r\n  { date: "2024-05-31", desktop: 178, mobile: 230 },\r\n  { date: "2024-06-01", desktop: 178, mobile: 200 },\r\n  { date: "2024-06-02", desktop: 470, mobile: 410 },\r\n  { date: "2024-06-03", desktop: 103, mobile: 160 },\r\n  { date: "2024-06-04", desktop: 439, mobile: 380 },\r\n  { date: "2024-06-05", desktop: 88, mobile: 140 },\r\n  { date: "2024-06-06", desktop: 294, mobile: 250 },\r\n  { date: "2024-06-07", desktop: 323, mobile: 370 },\r\n  { date: "2024-06-08", desktop: 385, mobile: 320 },\r\n  { date: "2024-06-09", desktop: 438, mobile: 480 },\r\n  { date: "2024-06-10", desktop: 155, mobile: 200 },\r\n  { date: "2024-06-11", desktop: 92, mobile: 150 },\r\n  { date: "2024-06-12", desktop: 492, mobile: 420 },\r\n  { date: "2024-06-13", desktop: 81, mobile: 130 },\r\n  { date: "2024-06-14", desktop: 426, mobile: 380 },\r\n  { date: "2024-06-15", desktop: 307, mobile: 350 },\r\n  { date: "2024-06-16", desktop: 371, mobile: 310 },\r\n  { date: "2024-06-17", desktop: 475, mobile: 520 },\r\n  { date: "2024-06-18", desktop: 107, mobile: 170 },\r\n  { date: "2024-06-19", desktop: 341, mobile: 290 },\r\n  { date: "2024-06-20", desktop: 408, mobile: 450 },\r\n  { date: "2024-06-21", desktop: 169, mobile: 210 },\r\n  { date: "2024-06-22", desktop: 317, mobile: 270 },\r\n  { date: "2024-06-23", desktop: 480, mobile: 530 },\r\n  { date: "2024-06-24", desktop: 132, mobile: 180 },\r\n  { date: "2024-06-25", desktop: 141, mobile: 190 },\r\n  { date: "2024-06-26", desktop: 434, mobile: 380 },\r\n  { date: "2024-06-27", desktop: 448, mobile: 490 },\r\n  { date: "2024-06-28", desktop: 149, mobile: 200 },\r\n  { date: "2024-06-29", desktop: 103, mobile: 160 },\r\n  { date: "2024-06-30", desktop: 446, mobile: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  views: {\r\n    label: "Page Views",\r\n  },\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarInteractive() {\r\n  const [activeChart, setActiveChart] =\r\n    React.useState<keyof typeof chartConfig>("desktop")\r\n\r\n  const total = React.useMemo(\r\n    () => ({\r\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\r\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\r\n    }),\r\n    [],\r\n  )\r\n\r\n  return (\r\n    <Card className="bg-secondary-background py-0 text-foreground">\r\n      <CardHeader className="flex flex-col items-stretch space-y-0 p-0 gap-0 border-b-2 border-b-border sm:flex-row">\r\n        <div className="flex flex-1 flex-col justify-center gap-1 sm:py-0 py-4 px-6">\r\n          <CardTitle>Bar Chart - Interactive</CardTitle>\r\n          <CardDescription>\r\n            Showing total visitors for the last 3 months\r\n          </CardDescription>\r\n        </div>\r\n        <div className="flex">\r\n          {["desktop", "mobile"].map((key) => {\r\n            const chart = key as keyof typeof chartConfig\r\n            return (\r\n              <button\r\n                key={chart}\r\n                data-active={activeChart === chart}\r\n                className="data-[active=true]:bg-[var(--chart-1)] data-[active=true]:text-main-foreground text-foreground even:data-[active=true]:bg-[var(--chart-2)] relative z-10 flex flex-1 flex-col justify-center gap-1 px-6 py-4 text-left sm:border-t-0 border-t-border border-t-2 even:border-l-2 sm:border-l-2 border-l-border sm:px-8 sm:py-6"\r\n                onClick={() => setActiveChart(chart)}\r\n              >\r\n                <span className="text-xs">{chartConfig[chart].label}</span>\r\n                <span className="text-lg leading-none font-heading sm:text-3xl">\r\n                  {total[key as keyof typeof total].toLocaleString()}\r\n                </span>\r\n              </button>\r\n            )\r\n          })}\r\n        </div>\r\n      </CardHeader>\r\n      <CardContent className="px-2 p-4 sm:p-6">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="aspect-auto h-[250px] w-full"\r\n        >\r\n          <BarChart\r\n            accessibilityLayer\r\n            className="[&_.recharts-layer_path]:![stroke-width:1]"\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              minTickGap={32}\r\n              tickFormatter={(value) => {\r\n                const date = new Date(value)\r\n                return date.toLocaleDateString("en-US", {\r\n                  month: "short",\r\n                  day: "numeric",\r\n                })\r\n              }}\r\n            />\r\n            <ChartTooltip\r\n              cursor={{ fill: "#8080804D" }}\r\n              content={\r\n                <ChartTooltipContent\r\n                  className="w-[150px]"\r\n                  nameKey="views"\r\n                  labelFormatter={(value) => {\r\n                    return new Date(value).toLocaleDateString("en-US", {\r\n                      month: "short",\r\n                      day: "numeric",\r\n                      year: "numeric",\r\n                    })\r\n                  }}\r\n                />\r\n              }\r\n            />\r\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarInteractive",
  },
  {
    component: ChartBarLabelCustom,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A bar chart with a custom label"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n  label: {\r\n    color: "var(--background)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarLabelCustom() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            layout="vertical"\r\n            margin={{\r\n              right: 16,\r\n            }}\r\n          >\r\n            <CartesianGrid horizontal={false} />\r\n            <YAxis\r\n              dataKey="month"\r\n              type="category"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n              hide\r\n            />\r\n            <XAxis dataKey="desktop" type="number" hide />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent indicator="line" />}\r\n            />\r\n            <Bar\r\n              dataKey="desktop"\r\n              layout="vertical"\r\n              fill="var(--color-desktop)"\r\n              radius={4}\r\n            >\r\n              <LabelList\r\n                dataKey="month"\r\n                position="insideLeft"\r\n                offset={8}\r\n                className="fill-(--color-main-foreground)"\r\n                fontSize={12}\r\n              />\r\n              <LabelList\r\n                dataKey="desktop"\r\n                position="right"\r\n                offset={8}\r\n                className="fill-foreground"\r\n                fontSize={12}\r\n              />\r\n            </Bar>\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarLabelCustom",
  },
  {
    component: ChartBarLabel,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A bar chart with a label"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186 },\r\n  { month: "February", desktop: 305 },\r\n  { month: "March", desktop: 237 },\r\n  { month: "April", desktop: 73 },\r\n  { month: "May", desktop: 209 },\r\n  { month: "June", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarLabel() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart - Label</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              top: 20,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>\r\n              <LabelList\r\n                position="top"\r\n                offset={12}\r\n                className="fill-foreground"\r\n                fontSize={12}\r\n              />\r\n            </Bar>\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarLabel",
  },
  {
    component: ChartBarMixed,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Bar, BarChart, XAxis, YAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A mixed bar chart"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarMixed() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart - Mixed</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            layout="vertical"\r\n            margin={{\r\n              left: 0,\r\n            }}\r\n          >\r\n            <YAxis\r\n              dataKey="browser"\r\n              type="category"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) =>\r\n                chartConfig[value as keyof typeof chartConfig]?.label\r\n              }\r\n            />\r\n            <XAxis dataKey="visitors" type="number" hide />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Bar dataKey="visitors" layout="vertical" radius={5} />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarMixed",
  },
  {
    component: ChartBarMultiple,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Bar, BarChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A multiple bar chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarMultiple() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart - Multiple</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent indicator="dot" />}\r\n            />\r\n            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />\r\n            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarMultiple",
  },
  {
    component: ChartBarNegative,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A bar chart with negative values"\r\n\r\nconst chartData = [\r\n  { month: "January", visitors: 186 },\r\n  { month: "February", visitors: 205 },\r\n  { month: "March", visitors: -207 },\r\n  { month: "April", visitors: 173 },\r\n  { month: "May", visitors: -209 },\r\n  { month: "June", visitors: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarNegative() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart - Negative</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <CartesianGrid vertical={false} />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel hideIndicator />}\r\n            />\r\n            <Bar\r\n              className="[&_.recharts-text]:fill-foreground"\r\n              dataKey="visitors"\r\n            >\r\n              <LabelList position="top" dataKey="month" fillOpacity={1} />\r\n              {chartData.map((item) => (\r\n                <Cell\r\n                  key={item.month}\r\n                  fill={item.visitors > 0 ? "var(--chart-1)" : "var(--chart-2)"}\r\n                />\r\n              ))}\r\n            </Bar>\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarNegative",
  },
  {
    component: ChartBarStacked,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Bar, BarChart, CartesianGrid, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartBarStacked() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={{ fill: "#8080804D" }}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <ChartLegend content={<ChartLegendContent />} />\r\n            <Bar\r\n              dataKey="desktop"\r\n              stackId="a"\r\n              fill="var(--color-desktop)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="mobile"\r\n              stackId="a"\r\n              fill="var(--color-mobile)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartBarStacked",
  },
  {
    component: ChartLineDefault,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { CartesianGrid, Line, LineChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A line chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186 },\r\n  { month: "February", desktop: 305 },\r\n  { month: "March", desktop: 237 },\r\n  { month: "April", desktop: 73 },\r\n  { month: "May", desktop: 209 },\r\n  { month: "June", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineDefault() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Line Chart</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer\r\n          className="[&_.recharts-layer_path]:stroke-black [&_.recharts-layer_path]:dark:stroke-white"\r\n          config={chartConfig}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Line\r\n              dataKey="desktop"\r\n              type="natural"\r\n              stroke="var(--color-desktop)"\r\n              strokeWidth={2}\r\n              dot={false}\r\n            />\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineDefault",
  },
  {
    component: ChartLineDotsColors,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { CartesianGrid, Dot, Line, LineChart } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A line chart with dots and colors"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n    color: "var(--chart-2)",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineDotsColors() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer\r\n          className="[&_.recharts-layer_path]:stroke-black [&_.recharts-layer_path]:dark:stroke-white"\r\n          config={chartConfig}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              top: 24,\r\n              left: 24,\r\n              right: 24,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={\r\n                <ChartTooltipContent\r\n                  indicator="line"\r\n                  nameKey="visitors"\r\n                  hideLabel\r\n                />\r\n              }\r\n            />\r\n            <Line\r\n              dataKey="visitors"\r\n              type="natural"\r\n              stroke="var(--color-visitors)"\r\n              strokeWidth={2}\r\n              dot={({ payload, ...props }) => {\r\n                return (\r\n                  <Dot\r\n                    key={payload.browser}\r\n                    r={5}\r\n                    cx={props.cx}\r\n                    cy={props.cy}\r\n                    fill={payload.fill}\r\n                    stroke={payload.fill}\r\n                  />\r\n                )\r\n              }}\r\n            />\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineDotsColors",
  },
  {
    component: ChartLineDotsCustom,
    code: '"use client"\r\n\r\nimport { GitCommitVertical, TrendingUp } from "lucide-react"\r\nimport { CartesianGrid, Line, LineChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A line chart with custom dots"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineDotsCustom() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer\r\n          className="[&_.recharts-layer_path]:stroke-black [&_.recharts-layer_path]:dark:stroke-white"\r\n          config={chartConfig}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Line\r\n              dataKey="desktop"\r\n              type="natural"\r\n              stroke="var(--color-desktop)"\r\n              strokeWidth={2}\r\n              dot={({ cx, cy, payload }) => {\r\n                const r = 24\r\n                return (\r\n                  <GitCommitVertical\r\n                    key={payload.month}\r\n                    x={cx - r / 2}\r\n                    y={cy - r / 2}\r\n                    width={r}\r\n                    height={r}\r\n                    fill="hsl(var(--background))"\r\n                    stroke="var(--color-desktop)"\r\n                  />\r\n                )\r\n              }}\r\n            />\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineDotsCustom",
  },
  {
    component: ChartLineDots,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { CartesianGrid, Line, LineChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A line chart with dots"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineDots() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Line Chart - Dots</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer\r\n          className="[&_.recharts-layer_path]:stroke-black [&_.recharts-layer_path]:dark:stroke-white"\r\n          config={chartConfig}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Line\r\n              dataKey="desktop"\r\n              type="natural"\r\n              stroke="var(--color-desktop)"\r\n              strokeWidth={2}\r\n              dot={{\r\n                fill: "var(--color-desktop)",\r\n              }}\r\n              activeDot={{\r\n                r: 6,\r\n              }}\r\n            />\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineDots",
  },
  {
    component: ChartLineInteractive,
    code: '"use client"\r\n\r\nimport { CartesianGrid, Line, LineChart, XAxis } from "recharts"\r\n\r\nimport * as React from "react"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nimport { cn } from "@/lib/utils"\r\n\r\nexport const description = "An interactive line chart"\r\n\r\nconst chartData = [\r\n  { date: "2024-04-01", desktop: 222, mobile: 150 },\r\n  { date: "2024-04-02", desktop: 97, mobile: 180 },\r\n  { date: "2024-04-03", desktop: 167, mobile: 120 },\r\n  { date: "2024-04-04", desktop: 242, mobile: 260 },\r\n  { date: "2024-04-05", desktop: 373, mobile: 290 },\r\n  { date: "2024-04-06", desktop: 301, mobile: 340 },\r\n  { date: "2024-04-07", desktop: 245, mobile: 180 },\r\n  { date: "2024-04-08", desktop: 409, mobile: 320 },\r\n  { date: "2024-04-09", desktop: 59, mobile: 110 },\r\n  { date: "2024-04-10", desktop: 261, mobile: 190 },\r\n  { date: "2024-04-11", desktop: 327, mobile: 350 },\r\n  { date: "2024-04-12", desktop: 292, mobile: 210 },\r\n  { date: "2024-04-13", desktop: 342, mobile: 380 },\r\n  { date: "2024-04-14", desktop: 137, mobile: 220 },\r\n  { date: "2024-04-15", desktop: 120, mobile: 170 },\r\n  { date: "2024-04-16", desktop: 138, mobile: 190 },\r\n  { date: "2024-04-17", desktop: 446, mobile: 360 },\r\n  { date: "2024-04-18", desktop: 364, mobile: 410 },\r\n  { date: "2024-04-19", desktop: 243, mobile: 180 },\r\n  { date: "2024-04-20", desktop: 89, mobile: 150 },\r\n  { date: "2024-04-21", desktop: 137, mobile: 200 },\r\n  { date: "2024-04-22", desktop: 224, mobile: 170 },\r\n  { date: "2024-04-23", desktop: 138, mobile: 230 },\r\n  { date: "2024-04-24", desktop: 387, mobile: 290 },\r\n  { date: "2024-04-25", desktop: 215, mobile: 250 },\r\n  { date: "2024-04-26", desktop: 75, mobile: 130 },\r\n  { date: "2024-04-27", desktop: 383, mobile: 420 },\r\n  { date: "2024-04-28", desktop: 122, mobile: 180 },\r\n  { date: "2024-04-29", desktop: 315, mobile: 240 },\r\n  { date: "2024-04-30", desktop: 454, mobile: 380 },\r\n  { date: "2024-05-01", desktop: 165, mobile: 220 },\r\n  { date: "2024-05-02", desktop: 293, mobile: 310 },\r\n  { date: "2024-05-03", desktop: 247, mobile: 190 },\r\n  { date: "2024-05-04", desktop: 385, mobile: 420 },\r\n  { date: "2024-05-05", desktop: 481, mobile: 390 },\r\n  { date: "2024-05-06", desktop: 498, mobile: 520 },\r\n  { date: "2024-05-07", desktop: 388, mobile: 300 },\r\n  { date: "2024-05-08", desktop: 149, mobile: 210 },\r\n  { date: "2024-05-09", desktop: 227, mobile: 180 },\r\n  { date: "2024-05-10", desktop: 293, mobile: 330 },\r\n  { date: "2024-05-11", desktop: 335, mobile: 270 },\r\n  { date: "2024-05-12", desktop: 197, mobile: 240 },\r\n  { date: "2024-05-13", desktop: 197, mobile: 160 },\r\n  { date: "2024-05-14", desktop: 448, mobile: 490 },\r\n  { date: "2024-05-15", desktop: 473, mobile: 380 },\r\n  { date: "2024-05-16", desktop: 338, mobile: 400 },\r\n  { date: "2024-05-17", desktop: 499, mobile: 420 },\r\n  { date: "2024-05-18", desktop: 315, mobile: 350 },\r\n  { date: "2024-05-19", desktop: 235, mobile: 180 },\r\n  { date: "2024-05-20", desktop: 177, mobile: 230 },\r\n  { date: "2024-05-21", desktop: 82, mobile: 140 },\r\n  { date: "2024-05-22", desktop: 81, mobile: 120 },\r\n  { date: "2024-05-23", desktop: 252, mobile: 290 },\r\n  { date: "2024-05-24", desktop: 294, mobile: 220 },\r\n  { date: "2024-05-25", desktop: 201, mobile: 250 },\r\n  { date: "2024-05-26", desktop: 213, mobile: 170 },\r\n  { date: "2024-05-27", desktop: 420, mobile: 460 },\r\n  { date: "2024-05-28", desktop: 233, mobile: 190 },\r\n  { date: "2024-05-29", desktop: 78, mobile: 130 },\r\n  { date: "2024-05-30", desktop: 340, mobile: 280 },\r\n  { date: "2024-05-31", desktop: 178, mobile: 230 },\r\n  { date: "2024-06-01", desktop: 178, mobile: 200 },\r\n  { date: "2024-06-02", desktop: 470, mobile: 410 },\r\n  { date: "2024-06-03", desktop: 103, mobile: 160 },\r\n  { date: "2024-06-04", desktop: 439, mobile: 380 },\r\n  { date: "2024-06-05", desktop: 88, mobile: 140 },\r\n  { date: "2024-06-06", desktop: 294, mobile: 250 },\r\n  { date: "2024-06-07", desktop: 323, mobile: 370 },\r\n  { date: "2024-06-08", desktop: 385, mobile: 320 },\r\n  { date: "2024-06-09", desktop: 438, mobile: 480 },\r\n  { date: "2024-06-10", desktop: 155, mobile: 200 },\r\n  { date: "2024-06-11", desktop: 92, mobile: 150 },\r\n  { date: "2024-06-12", desktop: 492, mobile: 420 },\r\n  { date: "2024-06-13", desktop: 81, mobile: 130 },\r\n  { date: "2024-06-14", desktop: 426, mobile: 380 },\r\n  { date: "2024-06-15", desktop: 307, mobile: 350 },\r\n  { date: "2024-06-16", desktop: 371, mobile: 310 },\r\n  { date: "2024-06-17", desktop: 475, mobile: 520 },\r\n  { date: "2024-06-18", desktop: 107, mobile: 170 },\r\n  { date: "2024-06-19", desktop: 341, mobile: 290 },\r\n  { date: "2024-06-20", desktop: 408, mobile: 450 },\r\n  { date: "2024-06-21", desktop: 169, mobile: 210 },\r\n  { date: "2024-06-22", desktop: 317, mobile: 270 },\r\n  { date: "2024-06-23", desktop: 480, mobile: 530 },\r\n  { date: "2024-06-24", desktop: 132, mobile: 180 },\r\n  { date: "2024-06-25", desktop: 141, mobile: 190 },\r\n  { date: "2024-06-26", desktop: 434, mobile: 380 },\r\n  { date: "2024-06-27", desktop: 448, mobile: 490 },\r\n  { date: "2024-06-28", desktop: 149, mobile: 200 },\r\n  { date: "2024-06-29", desktop: 103, mobile: 160 },\r\n  { date: "2024-06-30", desktop: 446, mobile: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  views: {\r\n    label: "Page Views",\r\n  },\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineInteractive() {\r\n  const [activeChart, setActiveChart] =\r\n    React.useState<keyof typeof chartConfig>("desktop")\r\n\r\n  const total = React.useMemo(\r\n    () => ({\r\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\r\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\r\n    }),\r\n    [],\r\n  )\r\n\r\n  return (\r\n    <Card className="bg-secondary-background py-0 text-foreground">\r\n      <CardHeader className="flex flex-col items-stretch space-y-0 p-0 gap-0 border-b-2 border-b-border sm:flex-row">\r\n        <div className="flex flex-1 flex-col justify-center gap-1 sm:py-0 py-4 px-6">\r\n          <CardTitle>Line Chart - Interactive</CardTitle>\r\n          <CardDescription>\r\n            Showing total visitors for the last 3 months\r\n          </CardDescription>\r\n        </div>\r\n        <div className="flex">\r\n          {["desktop", "mobile"].map((key) => {\r\n            const chart = key as keyof typeof chartConfig\r\n            return (\r\n              <button\r\n                key={chart}\r\n                data-active={activeChart === chart}\r\n                className="data-[active=true]:bg-[var(--chart-1)] data-[active=true]:text-main-foreground text-foreground even:data-[active=true]:bg-[var(--chart-2)] relative z-10 flex flex-1 flex-col justify-center gap-1 px-6 py-4 text-left sm:border-t-0 border-t-border border-t-2 even:border-l-2 sm:border-l-2 border-l-border sm:px-8 sm:py-6"\r\n                onClick={() => setActiveChart(chart)}\r\n              >\r\n                <span className="text-xs">{chartConfig[chart].label}</span>\r\n                <span className="text-lg leading-none font-heading sm:text-3xl">\r\n                  {total[key as keyof typeof total].toLocaleString()}\r\n                </span>\r\n              </button>\r\n            )\r\n          })}\r\n        </div>\r\n      </CardHeader>\r\n      <CardContent className="px-2 p-4 sm:p-6">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className={cn(\r\n            "aspect-auto h-[250px] w-full",\r\n            activeChart === "mobile" &&\r\n              "[&_.recharts-layer_path]:stroke-[var(--color-mobile)]",\r\n            activeChart === "desktop" &&\r\n              "[&_.recharts-layer_path]:stroke-[var(--color-desktop)]",\r\n          )}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              minTickGap={32}\r\n              tickFormatter={(value) => {\r\n                const date = new Date(value)\r\n                return date.toLocaleDateString("en-US", {\r\n                  month: "short",\r\n                  day: "numeric",\r\n                })\r\n              }}\r\n            />\r\n            <ChartTooltip\r\n              content={\r\n                <ChartTooltipContent\r\n                  className="w-[150px]"\r\n                  nameKey="views"\r\n                  labelFormatter={(value) => {\r\n                    return new Date(value).toLocaleDateString("en-US", {\r\n                      month: "short",\r\n                      day: "numeric",\r\n                      year: "numeric",\r\n                    })\r\n                  }}\r\n                />\r\n              }\r\n            />\r\n            <Line\r\n              dataKey={activeChart}\r\n              type="monotone"\r\n              strokeWidth={2}\r\n              dot={false}\r\n              activeDot={{\r\n                fill: "var(--chart-active-dot)",\r\n              }}\r\n            />\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineInteractive",
  },
  {
    component: ChartLineLabelCustom,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { CartesianGrid, LabelList, Line, LineChart } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A line chart with a custom label"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n    color: "var(--chart-2)",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineLabelCustom() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Line Chart - Custom Label</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer\r\n          className="[&_.recharts-layer_path]:stroke-black [&_.recharts-layer_path]:dark:stroke-white"\r\n          config={chartConfig}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              top: 24,\r\n              left: 24,\r\n              right: 24,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={\r\n                <ChartTooltipContent\r\n                  indicator="line"\r\n                  nameKey="visitors"\r\n                  hideLabel\r\n                />\r\n              }\r\n            />\r\n            <Line\r\n              dataKey="visitors"\r\n              type="natural"\r\n              stroke="var(--color-visitors)"\r\n              strokeWidth={2}\r\n              dot={{\r\n                fill: "var(--color-visitors)",\r\n              }}\r\n              activeDot={{\r\n                r: 6,\r\n              }}\r\n            >\r\n              <LabelList\r\n                position="top"\r\n                offset={12}\r\n                className="fill-foreground"\r\n                fontSize={12}\r\n                dataKey="browser"\r\n                formatter={(value: keyof typeof chartConfig) =>\r\n                  chartConfig[value]?.label\r\n                }\r\n              />\r\n            </Line>\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineLabelCustom",
  },
  {
    component: ChartLineLabel,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A line chart with a label"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineLabel() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Line Chart - Label</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer\r\n          className="[&_.recharts-layer_path]:stroke-black [&_.recharts-layer_path]:dark:stroke-white"\r\n          config={chartConfig}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              top: 20,\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent indicator="line" />}\r\n            />\r\n            <Line\r\n              dataKey="desktop"\r\n              type="natural"\r\n              stroke="var(--color-desktop)"\r\n              strokeWidth={2}\r\n              dot={{\r\n                fill: "var(--color-desktop)",\r\n              }}\r\n              activeDot={{\r\n                r: 6,\r\n              }}\r\n            >\r\n              <LabelList\r\n                position="top"\r\n                offset={12}\r\n                className="fill-foreground"\r\n                fontSize={12}\r\n              />\r\n            </Line>\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineLabel",
  },
  {
    component: ChartLineLinear,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { CartesianGrid, Line, LineChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A linear line chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186 },\r\n  { month: "February", desktop: 305 },\r\n  { month: "March", desktop: 237 },\r\n  { month: "April", desktop: 73 },\r\n  { month: "May", desktop: 209 },\r\n  { month: "June", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineLinear() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Line Chart - Linear</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer\r\n          className="[&_.recharts-layer_path]:stroke-black [&_.recharts-layer_path]:dark:stroke-white"\r\n          config={chartConfig}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Line\r\n              dataKey="desktop"\r\n              type="linear"\r\n              stroke="var(--color-desktop)"\r\n              strokeWidth={2}\r\n              dot={false}\r\n            />\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineLinear",
  },
  {
    component: ChartLineMultiple,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { CartesianGrid, Line, LineChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A multiple line chart"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186, mobile: 80 },\r\n  { month: "February", desktop: 305, mobile: 200 },\r\n  { month: "March", desktop: 237, mobile: 120 },\r\n  { month: "April", desktop: 73, mobile: 190 },\r\n  { month: "May", desktop: 209, mobile: 130 },\r\n  { month: "June", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineMultiple() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Line Chart - Multiple</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer\r\n          className="[&_.recharts-layer_path]:stroke-black [&_.recharts-layer_path]:dark:stroke-white"\r\n          config={chartConfig}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\r\n            <Line\r\n              dataKey="desktop"\r\n              type="monotone"\r\n              stroke="var(--color-desktop)"\r\n              strokeWidth={2}\r\n              dot={false}\r\n            />\r\n            <Line\r\n              dataKey="mobile"\r\n              type="monotone"\r\n              stroke="var(--color-mobile)"\r\n              strokeWidth={2}\r\n              dot={false}\r\n            />\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter>\r\n        <div className="flex w-full items-start gap-2 text-sm">\r\n          <div className="grid gap-2">\r\n            <div className="flex items-center gap-2 leading-none font-medium">\r\n              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n            </div>\r\n            <div className="text-muted-foreground flex items-center gap-2 leading-none">\r\n              Showing total visitors for the last 6 months\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineMultiple",
  },
  {
    component: ChartLineStep,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { CartesianGrid, Line, LineChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A line chart with step"\r\n\r\nconst chartData = [\r\n  { month: "January", desktop: 186 },\r\n  { month: "February", desktop: 305 },\r\n  { month: "March", desktop: 237 },\r\n  { month: "April", desktop: 73 },\r\n  { month: "May", desktop: 209 },\r\n  { month: "June", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: "Desktop",\r\n    color: "var(--chart-1)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartLineStep() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Line Chart - Step</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer\r\n          className="[&_.recharts-layer_path]:stroke-black [&_.recharts-layer_path]:dark:stroke-white"\r\n          config={chartConfig}\r\n        >\r\n          <LineChart\r\n            accessibilityLayer\r\n            data={chartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey="month"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Line\r\n              dataKey="desktop"\r\n              type="step"\r\n              stroke="var(--color-desktop)"\r\n              strokeWidth={2}\r\n              dot={false}\r\n            />\r\n          </LineChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col items-start gap-2 text-sm">\r\n        <div className="flex gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartLineStep",
  },
  {
    component: ChartPieDonutActive,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Label, Pie, PieChart, Sector } from "recharts"\r\nimport { PieSectorDataItem } from "recharts/types/polar/Pie"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A donut chart with an active sector"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartPieDonutActive() {\r\n  return (\r\n    <Card className="flex flex-col bg-secondary-background text-foreground">\r\n      <CardHeader className="items-center pb-0">\r\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className="flex-1 pb-0">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="mx-auto aspect-square max-h-[250px]"\r\n        >\r\n          <PieChart>\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Pie\r\n              data={chartData}\r\n              dataKey="visitors"\r\n              nameKey="browser"\r\n              innerRadius={60}\r\n              strokeWidth={5}\r\n              activeIndex={0}\r\n              activeShape={({\r\n                outerRadius = 0,\r\n                ...props\r\n              }: PieSectorDataItem) => (\r\n                <Sector {...props} outerRadius={outerRadius + 10} />\r\n              )}\r\n            />\r\n          </PieChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col gap-2 text-sm">\r\n        <div className="flex items-center gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartPieDonutActive",
  },
  {
    component: ChartPieDonutText,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Label, Pie, PieChart } from "recharts"\r\n\r\nimport * as React from "react"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A donut chart with text"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 190, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartPieDonutText() {\r\n  const totalVisitors = React.useMemo(() => {\r\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\r\n  }, [])\r\n\r\n  return (\r\n    <Card className="flex flex-col bg-secondary-background text-foreground">\r\n      <CardHeader className="items-center pb-0">\r\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className="flex-1 pb-0">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="mx-auto aspect-square max-h-[250px]"\r\n        >\r\n          <PieChart>\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Pie\r\n              data={chartData}\r\n              dataKey="visitors"\r\n              nameKey="browser"\r\n              innerRadius={60}\r\n              strokeWidth={2}\r\n            >\r\n              <Label\r\n                content={({ viewBox }) => {\r\n                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {\r\n                    return (\r\n                      <text\r\n                        x={viewBox.cx}\r\n                        y={viewBox.cy}\r\n                        textAnchor="middle"\r\n                        dominantBaseline="middle"\r\n                      >\r\n                        <tspan\r\n                          x={viewBox.cx}\r\n                          y={viewBox.cy}\r\n                          className="fill-foreground text-3xl font-bold"\r\n                        >\r\n                          {totalVisitors.toLocaleString()}\r\n                        </tspan>\r\n                        <tspan\r\n                          x={viewBox.cx}\r\n                          y={(viewBox.cy || 0) + 24}\r\n                          className="fill-foreground"\r\n                        >\r\n                          Visitors\r\n                        </tspan>\r\n                      </text>\r\n                    )\r\n                  }\r\n                }}\r\n              />\r\n            </Pie>\r\n          </PieChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col gap-2 text-sm">\r\n        <div className="flex items-center gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartPieDonutText",
  },
  {
    component: ChartPieDonut,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Pie, PieChart } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A donut chart"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartPieDonut() {\r\n  return (\r\n    <Card className="flex flex-col bg-secondary-background text-foreground">\r\n      <CardHeader className="items-center pb-0">\r\n        <CardTitle>Pie Chart - Donut</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className="flex-1 pb-0">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="mx-auto aspect-square max-h-[250px]"\r\n        >\r\n          <PieChart>\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Pie\r\n              data={chartData}\r\n              dataKey="visitors"\r\n              nameKey="browser"\r\n              innerRadius={60}\r\n            />\r\n          </PieChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col gap-2 text-sm">\r\n        <div className="flex items-center gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartPieDonut",
  },
  {
    component: ChartPieLabelCustom,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Pie, PieChart } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A pie chart with a custom label"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartPieLabelCustom() {\r\n  return (\r\n    <Card className="flex flex-col bg-secondary-background text-foreground">\r\n      <CardHeader className="items-center pb-0">\r\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className="flex-1 pb-0">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="mx-auto aspect-square max-h-[250px] px-0"\r\n        >\r\n          <PieChart>\r\n            <ChartTooltip\r\n              content={<ChartTooltipContent nameKey="visitors" hideLabel />}\r\n            />\r\n            <Pie\r\n              data={chartData}\r\n              dataKey="visitors"\r\n              labelLine={false}\r\n              label={({ payload, ...props }) => {\r\n                return (\r\n                  <text\r\n                    cx={props.cx}\r\n                    cy={props.cy}\r\n                    x={props.x}\r\n                    y={props.y}\r\n                    textAnchor={props.textAnchor}\r\n                    dominantBaseline={props.dominantBaseline}\r\n                    fill="hsla(var(--foreground))"\r\n                  >\r\n                    {payload.visitors}\r\n                  </text>\r\n                )\r\n              }}\r\n              nameKey="browser"\r\n            />\r\n          </PieChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col gap-2 text-sm">\r\n        <div className="flex items-center gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartPieLabelCustom",
  },
  {
    component: ChartPieLabelList,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { LabelList, Pie, PieChart } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A pie chart with a label list"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartPieLabelList() {\r\n  return (\r\n    <Card className="flex flex-col bg-secondary-background text-foreground">\r\n      <CardHeader className="items-center pb-0">\r\n        <CardTitle>Pie Chart - Label List</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className="flex-1 pb-0">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="[&_.recharts-text]:fill-main-foreground mx-auto aspect-square max-h-[250px]"\r\n        >\r\n          <PieChart>\r\n            <ChartTooltip\r\n              content={<ChartTooltipContent nameKey="visitors" hideLabel />}\r\n            />\r\n            <Pie data={chartData} dataKey="visitors">\r\n              <LabelList\r\n                dataKey="browser"\r\n                className="fill-main-foreground"\r\n                stroke="none"\r\n                fontSize={12}\r\n                formatter={(value: keyof typeof chartConfig) =>\r\n                  chartConfig[value]?.label\r\n                }\r\n              />\r\n            </Pie>\r\n          </PieChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col gap-2 text-sm">\r\n        <div className="flex items-center gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartPieLabelList",
  },
  {
    component: ChartPieLabel,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Pie, PieChart } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A pie chart with a label"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartPieLabel() {\r\n  return (\r\n    <Card className="flex flex-col bg-secondary-background text-foreground">\r\n      <CardHeader className="items-center pb-0">\r\n        <CardTitle>Pie Chart - Label</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className="flex-1 pb-0">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0"\r\n        >\r\n          <PieChart>\r\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\r\n            <Pie data={chartData} dataKey="visitors" label nameKey="browser" />\r\n          </PieChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col gap-2 text-sm">\r\n        <div className="flex items-center gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartPieLabel",
  },
  {
    component: ChartPieLegend,
    code: '"use client"\r\n\r\nimport { Pie, PieChart } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A pie chart with a legend"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartPieLegend() {\r\n  return (\r\n    <Card className="flex flex-col bg-secondary-background text-foreground">\r\n      <CardHeader className="items-center pb-0">\r\n        <CardTitle>Pie Chart - Legend</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className="flex-1 pb-0">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="mx-auto aspect-square max-h-[300px]"\r\n        >\r\n          <PieChart>\r\n            <Pie data={chartData} dataKey="visitors" />\r\n            <ChartLegend\r\n              content={<ChartLegendContent nameKey="browser" />}\r\n              className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"\r\n            />\r\n          </PieChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartPieLegend",
  },
  {
    component: ChartPieSimple,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Pie, PieChart } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A simple pie chart"\r\n\r\nconst chartData = [\r\n  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },\r\n  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },\r\n  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },\r\n  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },\r\n  { browser: "other", visitors: 90, fill: "var(--color-other)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  chrome: {\r\n    label: "Chrome",\r\n    color: "var(--chart-1)",\r\n  },\r\n  safari: {\r\n    label: "Safari",\r\n    color: "var(--chart-2)",\r\n  },\r\n  firefox: {\r\n    label: "Firefox",\r\n    color: "var(--chart-3)",\r\n  },\r\n  edge: {\r\n    label: "Edge",\r\n    color: "var(--chart-4)",\r\n  },\r\n  other: {\r\n    label: "Other",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartPieSimple() {\r\n  return (\r\n    <Card className="flex flex-col bg-secondary-background text-foreground">\r\n      <CardHeader className="items-center pb-0">\r\n        <CardTitle>Pie Chart</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className="flex-1 pb-0">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="mx-auto aspect-square max-h-[250px]"\r\n        >\r\n          <PieChart>\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Pie data={chartData} dataKey="visitors" nameKey="browser" />\r\n          </PieChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col gap-2 text-sm">\r\n        <div className="flex items-center gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartPieSimple",
  },
  {
    component: ChartPieStacked,
    code: '"use client"\r\n\r\nimport { TrendingUp } from "lucide-react"\r\nimport { Label, Pie, PieChart } from "recharts"\r\n\r\nimport * as React from "react"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A pie chart with stacked sections"\r\n\r\nconst desktopData = [\r\n  { month: "january", desktop: 186, fill: "var(--color-january)" },\r\n  { month: "february", desktop: 305, fill: "var(--color-february)" },\r\n  { month: "march", desktop: 237, fill: "var(--color-march)" },\r\n  { month: "april", desktop: 173, fill: "var(--color-april)" },\r\n  { month: "may", desktop: 209, fill: "var(--color-may)" },\r\n]\r\n\r\nconst mobileData = [\r\n  { month: "january", mobile: 80, fill: "var(--color-january)" },\r\n  { month: "february", mobile: 200, fill: "var(--color-february)" },\r\n  { month: "march", mobile: 120, fill: "var(--color-march)" },\r\n  { month: "april", mobile: 190, fill: "var(--color-april)" },\r\n  { month: "may", mobile: 130, fill: "var(--color-may)" },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: "Visitors",\r\n  },\r\n  desktop: {\r\n    label: "Desktop",\r\n  },\r\n  mobile: {\r\n    label: "Mobile",\r\n  },\r\n  january: {\r\n    label: "January",\r\n    color: "var(--chart-1)",\r\n  },\r\n  february: {\r\n    label: "February",\r\n    color: "var(--chart-2)",\r\n  },\r\n  march: {\r\n    label: "March",\r\n    color: "var(--chart-3)",\r\n  },\r\n  april: {\r\n    label: "April",\r\n    color: "var(--chart-4)",\r\n  },\r\n  may: {\r\n    label: "May",\r\n    color: "var(--chart-5)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartPieStacked() {\r\n  return (\r\n    <Card className="flex flex-col bg-secondary-background text-foreground">\r\n      <CardHeader className="items-center pb-0">\r\n        <CardTitle>Pie Chart - Stacked</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent className="flex-1 pb-0">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className="mx-auto aspect-square max-h-[250px]"\r\n        >\r\n          <PieChart>\r\n            <ChartTooltip\r\n              content={\r\n                <ChartTooltipContent\r\n                  labelKey="visitors"\r\n                  nameKey="month"\r\n                  indicator="line"\r\n                  labelFormatter={(_, payload) => {\r\n                    return chartConfig[\r\n                      payload?.[0].dataKey as keyof typeof chartConfig\r\n                    ].label\r\n                  }}\r\n                />\r\n              }\r\n            />\r\n            <Pie data={desktopData} dataKey="desktop" outerRadius={60} />\r\n            <Pie\r\n              data={mobileData}\r\n              dataKey="mobile"\r\n              innerRadius={70}\r\n              outerRadius={90}\r\n            />\r\n          </PieChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className="flex-col gap-2 text-sm">\r\n        <div className="flex items-center gap-2 leading-none font-medium">\r\n          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />\r\n        </div>\r\n        <div className="text-muted-foreground leading-none">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartPieStacked",
  },
  {
    component: ChartTooltipAdvanced,
    code: '"use client"\r\n\r\nimport { Bar, BarChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\n\r\nconst chartData = [\r\n  { date: "2024-07-15", running: 450, swimming: 300 },\r\n  { date: "2024-07-16", running: 380, swimming: 420 },\r\n  { date: "2024-07-17", running: 520, swimming: 120 },\r\n  { date: "2024-07-18", running: 140, swimming: 550 },\r\n  { date: "2024-07-19", running: 600, swimming: 350 },\r\n  { date: "2024-07-20", running: 480, swimming: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  running: {\r\n    label: "Running",\r\n    color: "var(--chart-1)",\r\n  },\r\n  swimming: {\r\n    label: "Swimming",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartTooltipAdvanced() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Tooltip - Advanced</CardTitle>\r\n        <CardDescription>\r\n          Tooltip with custom formatter and total.\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => {\r\n                return new Date(value).toLocaleDateString("en-US", {\r\n                  weekday: "short",\r\n                })\r\n              }}\r\n            />\r\n            <Bar\r\n              dataKey="running"\r\n              stackId="a"\r\n              fill="var(--color-running)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="swimming"\r\n              stackId="a"\r\n              fill="var(--color-swimming)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n            <ChartTooltip\r\n              content={\r\n                <ChartTooltipContent\r\n                  hideLabel\r\n                  className="w-[180px]"\r\n                  formatter={(value, name, item, index) => (\r\n                    <>\r\n                      <div\r\n                        className="h-2.5 w-2.5 shrink-0 border border-border rounded-[2px] bg-(--color-bg)"\r\n                        style={\r\n                          {\r\n                            "--color-bg": `var(--color-${name})`,\r\n                          } as React.CSSProperties\r\n                        }\r\n                      />\r\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\r\n                        name}\r\n                      <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">\r\n                        {value}\r\n                        <span className="text-muted-foreground font-normal">\r\n                          kcal\r\n                        </span>\r\n                      </div>\r\n                      {/* Add this after the last item */}\r\n                      {index === 1 && (\r\n                        <div className="text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium">\r\n                          Total\r\n                          <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">\r\n                            {item.payload.running + item.payload.swimming}\r\n                            <span className="text-muted-foreground font-normal">\r\n                              kcal\r\n                            </span>\r\n                          </div>\r\n                        </div>\r\n                      )}\r\n                    </>\r\n                  )}\r\n                />\r\n              }\r\n              cursor={false}\r\n              defaultIndex={1}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartTooltipAdvanced",
  },
  {
    component: ChartTooltipDefault,
    code: '"use client"\r\n\r\nimport { Bar, BarChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\nexport const iframeHeight = "600px"\r\nexport const containerClassName =\r\n  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"\r\n\r\nconst chartData = [\r\n  { date: "2024-07-15", running: 450, swimming: 300 },\r\n  { date: "2024-07-16", running: 380, swimming: 420 },\r\n  { date: "2024-07-17", running: 520, swimming: 120 },\r\n  { date: "2024-07-18", running: 140, swimming: 550 },\r\n  { date: "2024-07-19", running: 600, swimming: 350 },\r\n  { date: "2024-07-20", running: 480, swimming: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  running: {\r\n    label: "Running",\r\n    color: "var(--chart-1)",\r\n  },\r\n  swimming: {\r\n    label: "Swimming",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartTooltipDefault() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Tooltip - Default</CardTitle>\r\n        <CardDescription>\r\n          Default tooltip with ChartTooltipContent.\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => {\r\n                return new Date(value).toLocaleDateString("en-US", {\r\n                  weekday: "short",\r\n                })\r\n              }}\r\n            />\r\n            <Bar\r\n              dataKey="running"\r\n              stackId="a"\r\n              fill="var(--color-running)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="swimming"\r\n              stackId="a"\r\n              fill="var(--color-swimming)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n            <ChartTooltip\r\n              content={<ChartTooltipContent />}\r\n              cursor={false}\r\n              defaultIndex={1}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartTooltipDefault",
  },
  {
    component: ChartTooltipFormatter,
    code: '"use client"\r\n\r\nimport { Bar, BarChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\n\r\nconst chartData = [\r\n  { date: "2024-07-15", running: 450, swimming: 300 },\r\n  { date: "2024-07-16", running: 380, swimming: 420 },\r\n  { date: "2024-07-17", running: 520, swimming: 120 },\r\n  { date: "2024-07-18", running: 140, swimming: 550 },\r\n  { date: "2024-07-19", running: 600, swimming: 350 },\r\n  { date: "2024-07-20", running: 480, swimming: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  running: {\r\n    label: "Running",\r\n    color: "var(--chart-1)",\r\n  },\r\n  swimming: {\r\n    label: "Swimming",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartTooltipFormatter() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Tooltip - Formatter</CardTitle>\r\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => {\r\n                return new Date(value).toLocaleDateString("en-US", {\r\n                  weekday: "short",\r\n                })\r\n              }}\r\n            />\r\n            <Bar\r\n              dataKey="running"\r\n              stackId="a"\r\n              fill="var(--color-running)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="swimming"\r\n              stackId="a"\r\n              fill="var(--color-swimming)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n            <ChartTooltip\r\n              content={\r\n                <ChartTooltipContent\r\n                  hideLabel\r\n                  formatter={(value, name) => (\r\n                    <div className="text-muted-foreground flex min-w-[130px] items-center text-xs">\r\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\r\n                        name}\r\n                      <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">\r\n                        {value}\r\n                        <span className="text-muted-foreground font-normal">\r\n                          kcal\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  )}\r\n                />\r\n              }\r\n              cursor={false}\r\n              defaultIndex={1}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartTooltipFormatter",
  },
  {
    component: ChartTooltipIcons,
    code: '"use client"\r\n\r\nimport { Footprints, Waves } from "lucide-react"\r\nimport { Bar, BarChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\n\r\nconst chartData = [\r\n  { date: "2024-07-15", running: 450, swimming: 300 },\r\n  { date: "2024-07-16", running: 380, swimming: 420 },\r\n  { date: "2024-07-17", running: 520, swimming: 120 },\r\n  { date: "2024-07-18", running: 140, swimming: 550 },\r\n  { date: "2024-07-19", running: 600, swimming: 350 },\r\n  { date: "2024-07-20", running: 480, swimming: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  running: {\r\n    label: "Running",\r\n    color: "var(--chart-1)",\r\n    icon: Footprints,\r\n  },\r\n  swimming: {\r\n    label: "Swimming",\r\n    color: "var(--chart-2)",\r\n    icon: Waves,\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartTooltipIcons() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Tooltip - Icons</CardTitle>\r\n        <CardDescription>Tooltip with icons.</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => {\r\n                return new Date(value).toLocaleDateString("en-US", {\r\n                  weekday: "short",\r\n                })\r\n              }}\r\n            />\r\n            <Bar\r\n              dataKey="running"\r\n              stackId="a"\r\n              fill="var(--color-running)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="swimming"\r\n              stackId="a"\r\n              fill="var(--color-swimming)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n            <ChartTooltip\r\n              content={<ChartTooltipContent hideLabel />}\r\n              cursor={false}\r\n              defaultIndex={1}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartTooltipIcons",
  },
  {
    component: ChartTooltipIndicatorLine,
    code: '"use client"\r\n\r\nimport { Bar, BarChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\nexport const iframeHeight = "600px"\r\nexport const containerClassName =\r\n  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"\r\n\r\nconst chartData = [\r\n  { date: "2024-07-15", running: 450, swimming: 300 },\r\n  { date: "2024-07-16", running: 380, swimming: 420 },\r\n  { date: "2024-07-17", running: 520, swimming: 120 },\r\n  { date: "2024-07-18", running: 140, swimming: 550 },\r\n  { date: "2024-07-19", running: 600, swimming: 350 },\r\n  { date: "2024-07-20", running: 480, swimming: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  running: {\r\n    label: "Running",\r\n    color: "var(--chart-1)",\r\n  },\r\n  swimming: {\r\n    label: "Swimming",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartTooltipIndicatorLine() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Tooltip - Line Indicator</CardTitle>\r\n        <CardDescription>Tooltip with line indicator.</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => {\r\n                return new Date(value).toLocaleDateString("en-US", {\r\n                  weekday: "short",\r\n                })\r\n              }}\r\n            />\r\n            <Bar\r\n              dataKey="running"\r\n              stackId="a"\r\n              fill="var(--color-running)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="swimming"\r\n              stackId="a"\r\n              fill="var(--color-swimming)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n            <ChartTooltip\r\n              content={<ChartTooltipContent indicator="line" />}\r\n              cursor={false}\r\n              defaultIndex={1}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartTooltipIndicatorLine",
  },
  {
    component: ChartTooltipIndicatorNone,
    code: '"use client"\r\n\r\nimport { Bar, BarChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\n\r\nconst chartData = [\r\n  { date: "2024-07-15", running: 450, swimming: 300 },\r\n  { date: "2024-07-16", running: 380, swimming: 420 },\r\n  { date: "2024-07-17", running: 520, swimming: 120 },\r\n  { date: "2024-07-18", running: 140, swimming: 550 },\r\n  { date: "2024-07-19", running: 600, swimming: 350 },\r\n  { date: "2024-07-20", running: 480, swimming: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  running: {\r\n    label: "Running",\r\n    color: "var(--chart-1)",\r\n  },\r\n  swimming: {\r\n    label: "Swimming",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartTooltipIndicatorNone() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Tooltip - No Indicator</CardTitle>\r\n        <CardDescription>Tooltip with no indicator.</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => {\r\n                return new Date(value).toLocaleDateString("en-US", {\r\n                  weekday: "short",\r\n                })\r\n              }}\r\n            />\r\n            <Bar\r\n              dataKey="running"\r\n              stackId="a"\r\n              fill="var(--color-running)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="swimming"\r\n              stackId="a"\r\n              fill="var(--color-swimming)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n            <ChartTooltip\r\n              content={<ChartTooltipContent hideIndicator />}\r\n              cursor={false}\r\n              defaultIndex={1}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartTooltipIndicatorNone",
  },
  {
    component: ChartTooltipLabelCustom,
    code: '"use client"\r\n\r\nimport { Bar, BarChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\n\r\nconst chartData = [\r\n  { date: "2024-07-15", running: 450, swimming: 300 },\r\n  { date: "2024-07-16", running: 380, swimming: 420 },\r\n  { date: "2024-07-17", running: 520, swimming: 120 },\r\n  { date: "2024-07-18", running: 140, swimming: 550 },\r\n  { date: "2024-07-19", running: 600, swimming: 350 },\r\n  { date: "2024-07-20", running: 480, swimming: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  activities: {\r\n    label: "Activities",\r\n  },\r\n  running: {\r\n    label: "Running",\r\n    color: "var(--chart-1)",\r\n  },\r\n  swimming: {\r\n    label: "Swimming",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartTooltipLabelCustom() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Tooltip - Custom label</CardTitle>\r\n        <CardDescription>\r\n          Tooltip with custom label from chartConfig.\r\n        </CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => {\r\n                return new Date(value).toLocaleDateString("en-US", {\r\n                  weekday: "short",\r\n                })\r\n              }}\r\n            />\r\n            <Bar\r\n              dataKey="running"\r\n              stackId="a"\r\n              fill="var(--color-running)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="swimming"\r\n              stackId="a"\r\n              fill="var(--color-swimming)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n            <ChartTooltip\r\n              content={\r\n                <ChartTooltipContent labelKey="activities" indicator="line" />\r\n              }\r\n              cursor={false}\r\n              defaultIndex={1}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartTooltipLabelCustom",
  },
  {
    component: ChartTooltipLabelFormatter,
    code: '"use client"\r\n\r\nimport { Bar, BarChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\n\r\nconst chartData = [\r\n  { date: "2024-07-15", running: 450, swimming: 300 },\r\n  { date: "2024-07-16", running: 380, swimming: 420 },\r\n  { date: "2024-07-17", running: 520, swimming: 120 },\r\n  { date: "2024-07-18", running: 140, swimming: 550 },\r\n  { date: "2024-07-19", running: 600, swimming: 350 },\r\n  { date: "2024-07-20", running: 480, swimming: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  running: {\r\n    label: "Running",\r\n    color: "var(--chart-1)",\r\n  },\r\n  swimming: {\r\n    label: "Swimming",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartTooltipLabelFormatter() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Tooltip - Label Formatter</CardTitle>\r\n        <CardDescription>Tooltip with label formatter.</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => {\r\n                return new Date(value).toLocaleDateString("en-US", {\r\n                  weekday: "short",\r\n                })\r\n              }}\r\n            />\r\n            <Bar\r\n              dataKey="running"\r\n              stackId="a"\r\n              fill="var(--color-running)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="swimming"\r\n              stackId="a"\r\n              fill="var(--color-swimming)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n            <ChartTooltip\r\n              content={\r\n                <ChartTooltipContent\r\n                  labelFormatter={(value) => {\r\n                    return new Date(value).toLocaleDateString("en-US", {\r\n                      day: "numeric",\r\n                      month: "long",\r\n                      year: "numeric",\r\n                    })\r\n                  }}\r\n                />\r\n              }\r\n              cursor={false}\r\n              defaultIndex={1}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartTooltipLabelFormatter",
  },
  {
    component: ChartTooltipLabelNone,
    code: '"use client"\r\n\r\nimport { Bar, BarChart, XAxis } from "recharts"\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from "@/components/ui/card"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from "@/components/ui/chart"\r\n\r\nexport const description = "A stacked bar chart with a legend"\r\n\r\nconst chartData = [\r\n  { date: "2024-07-15", running: 450, swimming: 300 },\r\n  { date: "2024-07-16", running: 380, swimming: 420 },\r\n  { date: "2024-07-17", running: 520, swimming: 120 },\r\n  { date: "2024-07-18", running: 140, swimming: 550 },\r\n  { date: "2024-07-19", running: 600, swimming: 350 },\r\n  { date: "2024-07-20", running: 480, swimming: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  running: {\r\n    label: "Running",\r\n    color: "var(--chart-1)",\r\n  },\r\n  swimming: {\r\n    label: "Swimming",\r\n    color: "var(--chart-2)",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport default function ChartTooltipLabelNone() {\r\n  return (\r\n    <Card className="bg-secondary-background text-foreground">\r\n      <CardHeader>\r\n        <CardTitle>Tooltip - No Label</CardTitle>\r\n        <CardDescription>Tooltip with no label.</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <XAxis\r\n              dataKey="date"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => {\r\n                return new Date(value).toLocaleDateString("en-US", {\r\n                  weekday: "short",\r\n                })\r\n              }}\r\n            />\r\n            <Bar\r\n              dataKey="running"\r\n              stackId="a"\r\n              fill="var(--color-running)"\r\n              radius={[0, 0, 4, 4]}\r\n            />\r\n            <Bar\r\n              dataKey="swimming"\r\n              stackId="a"\r\n              fill="var(--color-swimming)"\r\n              radius={[4, 4, 0, 0]}\r\n            />\r\n            <ChartTooltip\r\n              content={<ChartTooltipContent hideIndicator hideLabel />}\r\n              cursor={false}\r\n              defaultIndex={1}\r\n            />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}\r\n',
    name: "ChartTooltipLabelNone",
  },
]
